官方文件中說明 Unstyled Mode 包含兩點說明，第一部分為設定 unstyled 為 true，此時所有的元件便不包含任何 CSS 樣式；第二部分為自訂樣式，在沒有樣式的情況下，建議使用 primeVue 提供的 Pass Through Props 功能，可取得元件內層 DOM，對其加上樣式，並支援全域配置以建立自訂主題。

unstyled 為 true

1. 設置 unstyled mode：在元件採用時將全域樣式設定為 false，即在 main.js 設定為 unstyled: true。

import { createApp } from "vue";
import PrimeVue from "primevue/config";
const app = createApp(App);

app.use(PrimeVue, { unstyled: true });

2. 若不使用在全域設定，各元件中仍可加入 unstyled 屬性將預設樣式還原。

<Button label="Submit" unstyled />

自訂樣式

1. 使用 Pass Through Props，自行定義各元件的樣式。此處須先安裝好 tailwindCSS，以利直接使用 CSS 通用類別樣式。

<Button
    label="Check"
    icon="pi pi-check"
    unstyled
    pt:root="bg-rose-500 hover:bg-rose-700 active:bg-rose-900 cursor-pointer py-2 px-4 rounded-full border-0 flex gap-2"
    pt:label="text-white font-bold text-lg"
    pt:icon="text-white text-xl"
  />

2. 在全域進行客製樣式的設定，在 main.js 中載入 primeVue 時加上 pt (即 Pass Through) 進行元件的設定。

// main.js
app.use(PrimeVue, {
  theme: {
    preset: Aura,
    options: {...}
  },
  pt: {
    button: { // 按鈕樣式的全域設定
      root: {
        class:
          'bg-zinc-500 hover:bg-zinc-700 cursor-pointer text-white p-3 rounded border-0 flex gap-2'
      },
      label: 'text-white font-bold text-xl',
      icon: 'text-white text-2xl'
    }
  }
});

// App.vue > HomeView.vue
<template>
	<main>
    <Button label="Check" icon="pi pi-check" />
  </main>
</template>

官方推薦的 CSS Library 除了 tailwindCSS 外，可選擇安裝 UnoCSS，官方也提供 vite + UnoCSS 範例(目前為 v3)。

參考連結：https://primevue.org/theming/unstyled/